<template>
	<div class="repertory-manager-info">
		<div class="main_content">
			<div class="main_content_title">
				<div class="left">
					<span>{{ propUpType === 'add' ? $t('publicBtn.add') : propUpType === 'edit' ? $t('publicBtn.edit') :
						$t('publicBtn.detail') }}</span>
					<template v-for="(item, index) in $route.meta.title">
						<span v-if="languageId === item.langId">{{ item.name }}</span>
					</template>
				</div>
				<div class="right" />
			</div>
			<div class="main_content_con">
				<el-form ref="info" :model="info" :rules="rules" label-width="110px" class="demo-ruleForm">
					<div class="content_info">
						<div v-if="propUpType === 'detail'">
							<el-row :gutter="24">
								<el-col :span="8">
									<el-form-item :label="$t('publicFormLabel.warehouseNumber')" v-if="info.intoOrder">
										<el-input readonly :value="info.intoOrder" />
									</el-form-item>
								</el-col>
								<el-col :span="8">
									<el-form-item :label="$t('publicFormLabel.warehouseWhere')">
										<el-input readonly :value="info.warehouseName" />
									</el-form-item>
								</el-col>
								<el-col :span="8">
									<el-form-item :label="$t('publicFormLabel.warehousingTime')">
										<el-input readonly :value="info.intoTime" />
									</el-form-item>
								</el-col>
							</el-row>
							<el-row :gutter="24">
								<el-col :span="8">
									<el-form-item :label="$t('publicFormLabel.brandName')">
										<el-input readonly :value="info.brandName" />
									</el-form-item>
								</el-col>
								<el-col :span="8">
									<el-form-item :label="$t('publicFormLabel.seriesName')">
										<el-input readonly :value="info.seriesName" />
									</el-form-item>
								</el-col>
								<el-col :span="8">
									<el-form-item :label="$t('publicFormLabel.carYear')">
										<el-input readonly :value="info.carYear" />
									</el-form-item>
								</el-col>
							</el-row>
							<el-row :gutter="24">
								<el-col :span="8">
									<el-form-item :label="$t('publicFormLabel.modelName')">
										<el-input readonly :value="info.modelName" />
									</el-form-item>
								</el-col>
								<el-col :span="8">
									<el-form-item :label="$t('publicFormLabel.outsideColours')">
										<el-input readonly :value="info.outsideColour" />
									</el-form-item>
								</el-col>
								<el-col :span="8">
									<el-form-item :label="$t('publicFormLabel.insideColours')">
										<el-input readonly :value="info.insideColour" />
									</el-form-item>
								</el-col>
							</el-row>
							<template v-for="(item, index) in info.retrofitList">
								<el-row :gutter="24" v-if="isRetrofitting === 1" :key="index">
									<el-col :span="8">
										<el-form-item :label="index === 0 ? $t('publicFormLabel.optionalPackage') : ' '">
											<div style="display: flex;align-items: center;">
												<el-input readonly :value="item.name" />
												<el-tooltip :content="item.describe" placement="top" v-if="item.describe">
													<i class="el-icon-info" style="color: #acadb1;"></i>
												</el-tooltip>
											</div>
										</el-form-item>
									</el-col>
									<el-col :span="8">
										<el-form-item :label="$t('publicFormLabel.oPPurchasePrice')">
											<el-input readonly type="number" min="0" v-model="item.cost"
												:placeholder="$t('placeholderTip.enter')">
												<template slot="append">{{ $t('text.priceUnit') }}</template>
											</el-input>
										</el-form-item>
									</el-col>
								</el-row>
							</template>
							<div class="line" />
							<el-row :gutter="24">
								<el-col :span="8">
									<el-form-item :label="$t('publicFormLabel.guidePrice')">
										<el-input readonly :value="info.guidancePrice">
											<template slot="append">{{ $t('text.priceUnit') }}</template>
										</el-input>
									</el-form-item>
								</el-col>
								<el-col :span="8">
									<el-form-item :label="$t('publicFormLabel.nakedCarPurchasePrice')">
										<el-input readonly :value="info.carCost">
											<template slot="append">{{ $t('text.priceUnit') }}</template>
										</el-input>
									</el-form-item>
								</el-col>
								<el-col :span="8" v-if="isRetrofitting === 1 && info.retrofitList">
									<el-form-item :label="$t('publicFormLabel.oPTotalPrice')">
										<el-input readonly :value="info.retrofitCost">
											<template slot="append">{{ $t('text.priceUnit') }}</template>
										</el-input>
									</el-form-item>
								</el-col>
								<el-col :span="8">
									<el-form-item :label="$t('publicFormLabel.bulkPurchasePrice')">
										<el-input readonly :value="info.totalCost">
											<template slot="append">{{ $t('text.priceUnit') }}</template>
										</el-input>
									</el-form-item>
								</el-col>
							</el-row>
							<div class="line"></div>
							<el-row :gutter="24">
								<el-col :span="8">
									<el-form-item :label="$t('publicFormLabel.vinNumber')">
										<el-input type="text" readonly v-model="info.vinNumber" maxlength="20" show-word-limit />
									</el-form-item>
								</el-col>
								<el-col :span="8">
									<el-form-item :label="$t('publicFormLabel.certificateNumber')">
										<el-input readonly :value="info.certificateNumber" />
									</el-form-item>
								</el-col>
								<el-col :span="8">
									<el-form-item :label="$t('publicFormLabel.engineNumber')">
										<el-input readonly :value="info.engineNumber" />
									</el-form-item>
								</el-col>
							</el-row>
							<div class="line"></div>
							<el-row :gutter="24">
								<el-col :span="8">
									<el-form-item :label="$t('publicFormLabel.status')">
										<!-- 状态 1:在途 2:在库 3:出库 4:销售出库 5:退货入库 6:已调拨 7:试驾车 -->
										<el-input readonly :value="info.stockState" />
									</el-form-item>
								</el-col>
								<!-- <el-col :span="8">
                <el-form-item label="PDI检测">
                  <el-input  readonly :value="info.isPdi" />
                </el-form-item>
              </el-col> -->
								<el-col :span="8">
									<el-form-item :label="$t('formLabel.usedState')">
										<el-input readonly :value="info.usedState" />
									</el-form-item>
								</el-col>
							</el-row>
						</div>
						<div v-else>
							<el-row :gutter="24">
								<el-col :span="8">
									<el-form-item :label="$t('publicFormLabel.modelName')" prop="modelName">
										<el-input :placeholder="$t('placeholderTip.pSelect')" :value="info.modelName" @focus="getFrame">
											<el-button slot="append" icon="el-icon-search" @click="getFrame"></el-button>
										</el-input>
									</el-form-item>
								</el-col>
								<el-col :span="8">
									<el-form-item :label="$t('publicFormLabel.outsideColours')" prop="outsideId">
										<el-select v-model="info.outsideId" filterable clearable :placeholder="$t('placeholderTip.pSelect')"
											style="width:100%">
											<el-option v-for="item in outsideList" :key="item.id" :label="item.name" :value="item.id">
											</el-option>
										</el-select>
									</el-form-item>
								</el-col>
								<el-col :span="8">
									<el-form-item :label="$t('publicFormLabel.insideColours')" prop="insideId">
										<el-select v-model="info.insideId" filterable clearable :placeholder="$t('placeholderTip.pSelect')"
											style="width:100%">
											<el-option v-for="item in insideList" :key="item.id" :label="item.name" :value="item.id">
											</el-option>
										</el-select>
									</el-form-item>
								</el-col>
							</el-row>
							<el-row :gutter="24">
								<el-col :span="8">
									<el-form-item :label="$t('publicFormLabel.vinNumber')" prop="vinNumber">
										<el-input type="text" v-model="info.vinNumber"
											:placeholder="$t('placeholderTip.placeholder') + $t('text.vinNumberTip')" maxlength="17"
											show-word-limit @keyup.native="btKeyUp($event, 'vinNumber')" />
									</el-form-item>
								</el-col>
								<el-col :span="8">
									<el-form-item :label="$t('publicFormLabel.certificateNumber')">
										<el-input type="text" v-model="info.certificateNumber" :placeholder="$t('placeholderTip.enter')"
											maxlength="17" show-word-limit @keyup.native="btKeyUp($event, 'certificateNumber')" />
									</el-form-item>
								</el-col>
								<el-col :span="8">
									<el-form-item :label="$t('publicFormLabel.engineNumber')">
										<el-input type="text" v-model="info.engineNumber" :placeholder="$t('placeholderTip.enter')"
											maxlength="11" show-word-limit @keyup.native="btKeyUp($event, 'engineNumber')" />
									</el-form-item>
								</el-col>
							</el-row>
							<template v-for="(item, index) in info.retrofitList">
								<el-row :gutter="24" v-if="isRetrofitting === 1" :key="index">
									<el-col :span="8">
										<el-form-item :label="index === 0 ? $t('publicFormLabel.optionalPackage') : ' '">
											<div style="display: flex;align-items: center;">
												<el-select v-model="item.retrofitId" clearable filterable
													:placeholder="$t('placeholderTip.pSelect')" style="width:100%"
													@change="getretrofitData($event, index)">
													<el-option v-for="item in retrofitList_1" :key="item.id"
														:label="item.name + '-' + item.amount + $t('text.priceUnit')" :value="item.id">
													</el-option>
												</el-select>
												<el-tooltip :content="item.describe" placement="top" v-if="item.describe">
													<i class="el-icon-info" style="color: #acadb1;"></i>
												</el-tooltip>
											</div>
										</el-form-item>
									</el-col>
									<el-col :span="8">
										<el-form-item :label="$t('publicFormLabel.oPPurchasePrice')">
											<el-input type="number" min="0" v-model="item.cost" :placeholder="$t('placeholderTip.enter')">
												<template slot="append">{{ $t('text.priceUnit') }}</template>
											</el-input>
										</el-form-item>
									</el-col>
									<el-button size="mini" type="primary"
										v-if="(index + 1 === info.retrofitList.length) && (info.retrofitList.length < retrofitList_1.length)"
										@click="addRetrofittData(index)">{{ $t('publicBtn.add') }}</el-button>
									<el-button v-if="info.retrofitList.length > 1" type="danger" size="mini"
										@click.stop="deletetRetrofittData(index)">{{ $t('publicBtn.delete') }}</el-button>
								</el-row>
							</template>

							<div class="line" />
							<el-row :gutter="24">
								<el-col :span="8">
									<el-form-item :label="$t('publicFormLabel.nakedCarPurchasePrice')" prop="carCost">
										<el-input type="number" min="0" v-model="info.carCost" :placeholder="$t('placeholderTip.enter')">
											<template slot="append">{{ $t('text.priceUnit') }}</template>
										</el-input>
									</el-form-item>
								</el-col>
								<el-col :span="8" v-if="isRetrofitting === 1 && info.retrofitList">
									<el-form-item :label="$t('publicFormLabel.oPTotalPrice')">
										<el-input disabled readonly :value="info.retrofitCost">
											<template slot="append">{{ $t('text.priceUnit') }}</template>
										</el-input>
									</el-form-item>
								</el-col>
								<el-col :span="8">
									<el-form-item :label="$t('publicFormLabel.bulkPurchasePrice')">
										<el-input disabled :value="info.totalCost">
											<template slot="append">{{ $t('text.priceUnit') }}</template>
										</el-input>
									</el-form-item>
								</el-col>
							</el-row>
							<div class="line" />
							<!-- 审批流程 propup_type 1 add -->
							<approvalProcessDetails :type=17 :propup_type=1 :list='approveList'></approvalProcessDetails>
						</div>
					</div>
					<div class="footerBtn">
						<el-button @click="getCancle">{{ propUpType === 'detail' ? $t('el.popconfirm.close') :
							$t('el.popconfirm.cancelButtonText') }}</el-button>
						<el-button type="primary" v-if="propUpType !== 'detail'" @click="addSubmitForm"
							v-loading.fullscreen.lock="fullscreenLoading">{{ $t('el.popconfirm.confirmButtonText') }}</el-button>
					</div>
				</el-form>
			</div>
		</div>
		<!-- 车型 -->
		<vehicleModel ref="vehicleModel"></vehicleModel>
	</div>
</template>
<script>
import {
	getRetrofitSelectList,
	getColourList
} from '@/api/system-manager'
import {
	getStockInfo,
	// getStockUpdateSave
} from '@/api/commercial-vehicle-manager'
import approvalProcessDetails from '@/components/approval-process-details'
import vehicleModel from '@/components/vehicle-model'
export default {
	name: 'repertoryManagerInfo',
	components: {
		vehicleModel,
		approvalProcessDetails
	},
	data() {
		return {
			info: {},
			outsideList: [],
			insideList: [],
			retrofitList_1: [], //选装包
			isRetrofitting: this.$store.getters.isRetrofitting, //是否开启选装 1开启 2关闭
			propUpType: '', // 'add' edit detail
			approveList: [], //审批
			rules: {
				modelName: [
					{
						required: true,
						message: this.$t('placeholderTip.pSelect'),
						trigger: 'change'
					}
				],
				vinNumber: [
					{
						required: true,
						message: this.$t('placeholderTip.enter') + this.$t('text.vinNumberTip'),
						trigger: 'blur'
					},
					{
						min: 17,
						max: 17,
						message: this.$t('text.vinNumberLengtTip'),
						trigger: 'blur'
					}
				],
				insideId: [
					{
						required: true,
						message: this.$t('placeholderTip.pSelect'),
						trigger: 'change'
					}
				],
				outsideId: [
					{
						required: true,
						message: this.$t('placeholderTip.pSelect'),
						trigger: 'change'
					}
				],
				carCost: [
					{
						required: true,
						message: this.$t('placeholderTip.enter'),
						trigger: 'blur'
					},
					{
						required: false,
						pattern: /^[0-9\.]+$/,
						message: this.$t('text.isNumber'),
						trigger: 'blur'
					}
				]
			},
			fullscreenLoading: false
		}
	},
	computed: {
		languageId() {
			// 固定语种ID  1:中文  2:英文 3:俄文 4:乌语
			return this.$store.getters.languageId
		},
	},
	watch: {
		'info.retrofitList': {
			handler: function (val) {
				if (this.propUpType === 'edit') {
					var cost = 0
					var price = 0
					for (var i = 0; i < val.length; i++) {
						var item = val[i]
						// 选装包采购价格处理
						if (item.cost) {
							cost = cost + Number(item.cost)
						}
						// 选装包售价
						if (item.amount) {
							price = price + Number(item.amount)
						}
					}
					this.info.retrofitAmt = Number(price) //选装包售价
					this.info.retrofitCost = Number(cost) //采购价
				}
			},
			deep: true
		},
		'info.carCost': {
			handler: function (val) {
				if (this.propUpType === 'edit') {
					this.info.totalCost =
						Number(this.info.carCost || 0) +
						Number(this.info.retrofitCost || 0)
				}
			},
			deep: true
		},
		'info.retrofitCost': {
			handler: function (val) {
				if (this.propUpType === 'edit') {
					this.info.totalCost =
						Number(this.info.carCost || 0) +
						Number(this.info.retrofitCost || 0)
				}
			},
			deep: true
		}
	},
	mounted() {
		window._vm = this
		this.propUpType = this.$route.query.propUpType
		this.getInfo(this.$route.query.id)
	},
	created() { },

	activated() { },
	destroyed() { },
	methods: {
		// 禁止input输入框输入特殊字符和汉字
		btKeyUp(e, key) {
			// 输入大写字母 + 数字
			this.info[key] = e.target.value.replace(/[^A-Z0-9]/g, '')
		},
		// 详情
		getInfo(id) {
			const loading = this.$loading({
				lock: true,
				text: this.$t('text.loading'),
				spinner: 'el-icon-loading',
				background: 'rgba(0, 0, 0, 0.7)'
			})
			getStockInfo(id).then(res => {
				if (res.code === 200) {
					loading.close()
					if (res.data.modelId && this.propUpType === 'edit') {
						this.getColorData(res.data.modelId)
						this.getRetrofittingRecordData(res.data.modelId)
					}
					if (this.propUpType === 'edit') {
						var obj = {
							id: res.data.id,
							modelName: res.data.modelName,
							modelId: res.data.modelId, //车型
							outsideId: res.data.outsideId, //外观
							insideId: res.data.insideId, //内饰
							vinNumber: res.data.vinNumber, //VIn码
							certificateNumber: res.data.certificateNumber,
							engineNumber: res.data.engineNumber,
							relationId: res.data.relationId, //
							retrofitCost: res.data.retrofitCost,
							retrofitAmt: res.data.retrofitAmt,
							totalCost: res.data.totalCost,
							carCost: res.data.carCost,
							retrofitList:
								res.data.retrofitList &&
									res.data.retrofitList.length > 0
									? res.data.retrofitList
									: [
										{
											amount: '',
											cost: '',
											describe: '',
											retrofitId: '',//选装包id
											name: ''
										}
									]
						}
						this.info = obj
					} else {
						this.info = res.data
					}
				} else {
					loading.close()
				}
			})
		},
		// 选装包售价变化
		getretrofitData(val, index) {
			if (val > 0) {
				this.retrofitList_1.filter(item => {
					if (val === item.id) {
						this.info.retrofitList[index].describe = item.describe
						this.info.retrofitList[index].name = item.name
						this.info.retrofitList[index].amount = item.amount || 0
						this.info.retrofitList[index].cost = item.cost || 0
					}
				})
			} else if (Number(val) === 0) {
				this.info.retrofitList[index].cost = ''
				this.info.retrofitList[index].amount = ''
			}
		},
		// 车型弹框
		getFrame() {
			this.$refs.vehicleModel.getOpen()
		},
		// 添加选装包多选
		addRetrofittData() {
			var obj = {
				describe: '', ////选装包描述
				amount: '', //选装包售价(元)
				cost: '', //选装包单价
				id: '',
				retrofitId: '',//选装包id
				name: ''
			}
			this.info.retrofitList.push(obj)
		},
		//删除选装包
		deletetRetrofittData(index) {
			this.info.retrofitList.splice(index, 1)
		},
		// 选择车型数据处理
		getvehicleModelId(row) {
			var obj = JSON.parse(row)
			if (obj.modelId !== this.info.modelId) {
				this.outsideList = []
				this.insideList = []
				this.retrofitList_1 = []
				this.info.retrofitList = [
					{
						amount: '',
						cost: '',
						describe: '',
						retrofitId: '',//选装包id
						name: ''
					}
				]
				this.info.insideId = ''
				this.info.outsideId = ''
				this.info.relationId = '' //选装包id
				this.info.retrofitAmt = '' //选装包售价
				this.info.modelId = obj.modelId
				this.info.modelName = obj.modelName
				this.getRetrofittingRecordData(obj.modelId)
				this.getColorData(obj.modelId)
			}
		},
		// 外观 内饰颜色
		getColorData(modelId) {
			// 1:外观 2:内饰
			getColourList(`type=1&modelId=${modelId}`).then(res => {
				if (res.code === 200) {
					if (res.data) {
						obj.outsideList = res.data
					}
				}
			})
			getColourList(`type=2&modelId=${modelId}`).then(res => {
				if (res.code === 200) {
					if (res.data) {
						obj.insideList = res.data
					}
				}
			})
		},
		// 选装包
		getRetrofittingRecordData(modelId) {
			getRetrofitSelectList(`modelId=${modelId}`).then(res => {
				if (res.code === 200) {
					if (res.data) {
						this.retrofitList_1 = res.data
					}
				}
			})
		},
		addSubmitForm() {
			this.$refs['info'].validate(valid => {
				if (valid) {
					var obj = JSON.parse(JSON.stringify(this.info))
					var outsideColour = ''
					var insideColour = ''
					var relationIds = []
					var retrofitList = []
					obj.retrofitList.filter(i => {
						if (i.id) {
							retrofitList.push(i) //处理为空数组对象 将有值对象重新复制数组
							relationIds.push(i.id) //多选选装id单独处理
						}
					})
					if (retrofitList.length > 1) {
						// 重复选装处理
						var copyList = []
						var nary = relationIds.sort()
						for (var i = 0; i < retrofitList.length; i++) {
							if (nary[i] == nary[i + 1]) {
								copyList.push(nary[i])
							}
						}
						if (copyList.length > 0) {
							this.$message({
								message: `选装包存在重复数据`,
								type: 'warning'
							})
							return false
						}
					}
					this.outsideList.filter(item => {
						if (item.id === obj.outsideId) {
							outsideColour = item.name
						}
					})
					this.insideList.filter(item => {
						if (item.id === obj.insideId) {
							insideColour = item.name
						}
					})
					var params = {
						stockId: obj.id,
						modelName: obj.modelName,
						modelId: obj.modelId, //车型
						outsideId: obj.outsideId, //外观
						outsideColour: outsideColour,
						insideColour: insideColour,
						insideId: obj.insideId, //内饰
						relationId: relationIds.toString(), //选装 ids
						retrofitCost: obj.retrofitCost, //选装包总金额
						retrofitAmt: obj.retrofitAmt,//选装包售价
						retrofitList: retrofitList, //选装多选
						vinNumber: obj.vinNumber, //VIn码
						certificateNumber: obj.certificateNumber,
						engineNumber: obj.engineNumber,
						totalCost: obj.totalCost,
						carCost: obj.carCost
					}
					this.fullscreenLoading = true
					getStockUpdateSave(params)
						.then(res => {
							if (res.code === 200) {
								this.$message({
									showClose: true,
									message: res.data || '修改成功',
									type: 'success',
									duration: 2000
								})
								this.fullscreenLoading = false
								this.getCancle()
							}
						})
						.catch(err => {
							this.fullscreenLoading = false
							console.log(err, 'err')
						})
				} else {
					return false
				}
			})
		},
		// 取消
		getCancle() {
			this.$store.state.tagsView.visitedViews.splice(
				this.$store.state.tagsView.visitedViews.findIndex(
					item => item.path === this.$route.path
				),
				1
			)
			this.$router.go(-1)
		}
	}
}
</script>
<style lang="scss" scoped>
.repertory-manager-info {
	height: 100%;
	width: 100%;
	padding: 20px;
	box-sizing: border-box;
	overflow: hidden;

	&>.main_content {
		width: 99.9%;
		height: 100%;

		&>.main_content_title {
			margin-bottom: 10px;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
		}

		.main_content_con {
			height: calc(100% - 40px);
			width: 100%;
			display: inline-block;
			border: 1px solid #dfe6ec;
			padding: 20px;
			overflow: hidden;

			&>.el-form {
				width: 100%;
				height: 100%;

				&>.content_info {
					width: 100%;
					height: calc(100% - 40px);
					overflow: hidden;
					overflow-y: auto;
				}

				.line {
					height: 1px;
					margin-bottom: 25px;
					background: #ebeef5;
				}

				.footerBtn {
					width: 100%;
					display: flex;
					justify-content: center;
				}
			}

			.el-button:hover,
			.el-button:focus {
				color: #000;
			}
		}
	}
}
</style>
